<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="edit-button">Edit</button>
		
		<div id="popup" style="display: none;">
		  <div id="popup-content">
		    <h2>Edit Data</h2>
		    <form>
		      <label for="name">Name:</label>
		      <input type="text" id="name" name="name">
		      <br>
		      <label for="email">Email:</label>
		      <input type="email" id="email" name="email">
		      <br>
		      <button type="submit">Save</button>
		    </form>
		    <button id="close-popup">Close</button>
		  </div>
		</div>
		
		<style>
		#popup {
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-color: rgba(0,0,0,0.8);
		  display: flex;
		  justify-content: center;
		  align-items: center;
		}
		
		#popup-content {
		  background-color: #fff;
		  padding: 20px;
		  border-radius: 5px;
		  text-align: center;
		}
		
		#close-popup {
		  margin-top: 10px;
		}
		</style>
		
		<script>
		document.getElementById("edit-button").addEventListener("click", function() {
		  document.getElementById("popup").style.display = "flex";
		});
		
		document.getElementById("close-popup").addEventListener("click", function() {
		  document.getElementById("popup").style.display = "none";
		});
		
		document.querySelector("#popup form").addEventListener("submit", function(e) {
		  e.preventDefault();
		  // Handle form submission here
		  document.getElementById("popup").style.display = "none";
		});
		</script>
	</body>
</html>